<template>
  <div class="more-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="评价列表" name="first">
        <div class="content" v-if="evaluateList.length>0">
          <div v-for="(item,i) in evaluateList" :key='i' class="replyOne">
            <div class="maincontent">
              <div class="headerImage">
                <img :src="item.headImg" alt="">
              </div>
              <el-row class="content">
                <el-col :span="20">
                  <div class="mainevaluation">
                    <div class="top"> <span class="evaluator">{{item.userName}}</span> <span class="time">{{item.createTime}}</span><span
                        class="addColorshow" v-if="checkPermission(['commentShow'])" @click="changeCommentoperate(item,item.status)">{{item.status!=0?'取消显示':'显示'}}</span>
                      <span class="addColorshow" v-if="checkPermission(['commentTop'])" @click="goCommentoperateTop(item,item.isTop)">{{item.isTop==1?'取消置顶':'置顶'}}</span>
                      <el-tooltip style="margin-left: 0.5rem;" v-if="checkPermission(['commentTop','commentShow'])"
                        content="此功能用于控制学员端的评价是否显示或置顶" placement="top">
                        <i class="el-icon-question"></i>
                      </el-tooltip>
                    </div>
                    <div class="bot">
                      <span>{{item.content}}</span>
                      <span class="huifubtn" v-if="item.showchildrenlist" >{{item.children}}条回复<span
                          class="addColor" @click="removechildren(item)">收起评论</span></span>
                      <span class="huifubtn" v-else>{{item.childrenList?item.childrenList.length:item.children}}条回复<span
                          class="addColor"  @click="getchildren(item)" v-if="item.children>0">查看更多</span></span>
                    </div>
                  </div>
                </el-col>
                <el-col :span="20">
                  <div class="mainevaluation-p">
                    <div class="bot">
                      <span v-if="checkPermission(['commentReply'])" @click="showReplayInput(item,'isParent')"
                        :class="item.showInput?'huifu addColor':'huifu'">{{item.showInput && isParent?'收起':'回复'}}</span><span
                        class="time">{{item.replyTime}}</span>
                    </div>
                    <div class="inputBox" v-if="item.showInput && isParent">
                      <el-input placeholder="请输入内容" type="textarea" v-model="textarea" rows="3"></el-input>
                      <el-button type="primary" class="replayBtn" @click="submintReplay(item)">评论</el-button>
                      <el-dropdown @command="handleCommand">
                        <span class="el-dropdown-link">
                          选择模板<i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown" placement="top-start">
                          <el-dropdown-item :command="item" v-for="item in commandoption" :key="item.id">
                            {{item.title}}</el-dropdown-item>
                        </el-dropdown-menu>
                      </el-dropdown>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
            <!-- 子列表 -->
            <div class="innerloding">
              <el-row>
                <el-col :span="20">
                  <div class="replyArea" v-if="item.showchildrenlist">

                    <div class="replayItem" v-for="(value,index) in item.childrenList" :key='index'>
                      <div class="top">
                        <span class="name">{{value.userName}}</span> <span class="replyNameBox" v-if="value.replyName!=''">回复
                          <span class="replyName name">{{value.replyName}}</span></span>：<span class="content">{{value.content}}</span>
                      </div>
                      <div class="bot">
                        <span v-if="checkPermission(['commentReply'])" @click="showReplayInput(value)" :class="value.showInput && isChildren?'huifu addColor':'huifu'">{{value.showInput && isChildren?'收起':'回复'}}</span><span
                          class="time">{{value.replyTime}}</span><span class="addColorshow" v-if="checkPermission(['commentShow'])"
                          @click="changeCommentoperate(value,value.status,'isChildren')">{{value.status!=0?'取消显示':'显示'}}

                        </span>
                      </div>
                      <div class="inputBox" v-if="value.showInput && isChildren">
                        <el-input placeholder="请输入内容" type="textarea" v-model="textarea" rows="3"></el-input>
                        <el-button type="primary" class="replayBtn" @click="submintReplay(value,item)">评论</el-button>
                        <el-dropdown @command="handleCommand">
                          <span class="el-dropdown-link">
                            选择模板<i class="el-icon-arrow-down el-icon--right"></i>
                          </span>
                          <el-dropdown-menu slot="dropdown" placement="top-start">
                            <el-dropdown-item :command="item" v-for="item in commandoption" :key="item.id">
                              {{item.title}}</el-dropdown-item>
                          </el-dropdown-menu>
                        </el-dropdown>
                      </div>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
        <div class="contentImg" v-else>
          <img src="../../../assets/error_images/nocomment.png" alt="" class="nocomment">
          <span>暂无评论~</span>
        </div>
      </el-tab-pane>
      <el-tab-pane label="评价模板" name="second">
        <div class="content">
          <commonline :newText="'模板'" @addList="additem" :importname="'模板'" :showRight="false" :isshowImport="false"
            :isshowAdd="checkPermission(['commentTemplateAdd'])"></commonline>
          <el-row>
            <el-col>
              <classTable :tabData="tabData" @openedit="openeditMb" @deleteform='deleteform' @refreshdata="refreshdata"></classTable>
            </el-col>
          </el-row>
        </div>
      </el-tab-pane>
    </el-tabs>
    <intentioneditdialog @confirmbtn="confirmbtn" :formType="formType" :isshowDialog="isshowDialog" :dialogTitle="dialogTitle"
      @closedialog="closedialogMb"></intentioneditdialog>
  </div>
</template>
<script>
  //api
  import {
    evaluateList,
    commentreply,
    commentchildren,
    commentoperate,
    CommentoperateTop,
    commenttemplate,
    commenttemplateoption
  } from '@/api/course'
  import classTable from './component/classTable'
  import intentioneditdialog from './component/intentioneditdialog'
  //引入通用行
  import commonline from '@/components/commonline/commonline'
  //按钮权限验证
  import checkPermission from "@/utils/permission";
  export default {
    data() {
      return {
        isshowDialog: false,
        issuccess: false,
        activeName: 'first',
        //页码
        page: 1,
        //翻页总数
        pageTotal: 5,
        //列表数据
        evaluateList: [],
        //模板下拉
        commandoption: [],
        //回复ID
        currentId: 0,
        //查看id
        showchildrenlist: false,
        isChildren: false,
        isParent: false,
        textarea: '',
        tabData: {},
        dialogTitle: '新增模板',
        formType: 0
      }
    },
    components: {
      classTable,
      intentioneditdialog,
      commonline
    },
    methods: {
      checkPermission,
      //模板下拉
      handleCommand(command) {
        this.textarea = command.content
      },
      //tabs切换
      handleClick(tab, event) {

      },
      refreshdata() {
        this.getevaluateList()
        this.getcommenttemplate()
        this.getcommenttemplateoption()
      },
      //获取列表数据
      async getevaluateList(page = 1, rows = 10) {
        let params = {
          page,
          rows
        }
        let data = await evaluateList(params)
        this.isChildren = false
        this.evaluateList = data.data.list
        console.log(this.evaluateList, '  this.evaluateList')
        this.page = data.data.page.page
        this.pageTotal = data.data.page.pageTotal

      },
      //显示input
      showReplayInput(val, str) {

        if (str == 'isParent') {
          this.isParent = true
          this.isChildren = false
        } else {
          this.isParent = false
          this.isChildren = true
        }
        this.currentId = val.id
        this.current = val
        this.textarea = ''
        let list = this.evaluateList.concat([]);
        list.forEach(p => {
          if (p.id == val.id && this.isParent) {
            p.showInput = !p.showInput
             if (p.childrenList && p.childrenList.length > 0) {
              p.childrenList.forEach(c => {
                  c.showInput = false
              })
            }
          } else {
            p.showInput = false
            if (p.childrenList && p.childrenList.length > 0) {
              p.childrenList.forEach(c => {
                if (c.id == val.id) {
                  c.showInput = !c.showInput
                } else {
                  c.showInput = false
                }
              })
            }

          }

        })
        this.evaluateList = list
      },
      //模板下拉
      async getcommenttemplateoption() {
        let data = await commenttemplateoption()
        if (data.code == '0000') {
          this.commandoption = data.data
          console.log(this.commandoption)
        }
      },

      //提交评论
      async submintReplay(val,item) {
        let getchildrenItem=null;
        if(item){
            getchildrenItem=item
        }
        if (this.textarea == '') {
          this.$message({
            type: 'error',
            message: '请先填写评论内容'
          });
          return;
        }
        let params = {
          parent_id: val.id,
          content: this.textarea
        }
        let data = await commentreply(params)
        if (data.code == '0000') {
          this.textarea = '';

          this.$message({
            type: 'success',
            message: data.msg
          });
          if(getchildrenItem){
              this.getchildren(getchildrenItem)
          }else{
             this.getchildren(val)
          }
        
        }
      },
      //获取子列表
      async getchildren(val) {
      
        let item=val
        item.showchildrenlist = true
        this.isChildren = true
        let evaluateList = this.evaluateList.concat([])
        let params = {
          id: item.id
        }

        let data = await commentchildren(params)

        if (data.code == '0000' && data.data&& data.data.length > 0) {

          evaluateList.forEach(p => {
            if (p.id == item.id) {
              p.childrenList = data.data
            }
          })
          this.evaluateList = evaluateList
        }
      console.log(evaluateList)
      },
      //收起子列表
      removechildren(val) {
        let item=val
        item.showchildrenlist = null
      let evaluateList = this.evaluateList.concat([])
      this.evaluateList=evaluateList
        item.isChildren = false
      },
      //显示状态
      async changeCommentoperate(val, status, str) {
        let params = {
          id: val.id,
          status: status
        }
        let data = await commentoperate(params)
        if (data.code == '0000') {
          this.$message({
            type: 'success',
            message: data.msg
          });
          if (this.isChildren && str == 'isChildren') {
            this.getchildren(val)
          } else {
            this.getevaluateList()
          }
        }
      },
      async goCommentoperateTop(val, isTop) {
        let params = {
          id: val.id,
          isTop: isTop
        }
        let data = await CommentoperateTop(params)
        if (data.code == '0000') {
          this.$message({
            type: 'success',
            message: data.msg
          });
          this.getevaluateList()
        }

      },
      //获取模板列表
      async getcommenttemplate() {
        let data = await commenttemplate()
        if (data.code == '0000') {
          this.tabData = data.data
        }

      },
      additem() {
        this.isshowDialog = true
        this.dialogTitle = '新增模板'
      },
      //打开模板弹框编辑新增
      openeditMb(val) {
        console.log(val)
        this.isshowDialog = true
        this.dialogTitle = '编辑模板'
        this.formType = 1
        this.$bus.emit('editreadform', val)
      },
      closedialogMb() {
        this.isshowDialog = false
      },
      //新增模板成功
      confirmbtn() {
        this.isshowDialog = false
        this.getcommenttemplate()
      },
      deleteform() {
        this.getcommenttemplate()
      }
    },
    created() {
      this.getevaluateList()
      this.getcommenttemplate()
      this.getcommenttemplateoption()
    },
    mounted() {

    },

  }
</script>

<style scoped lang='scss'>
  ::v-deep {
    .el-dropdown {
      margin-left: 1rem;
    }

    .el-dropdown-link {
      cursor: pointer;
      color: #409EFF;
    }

    .el-icon-arrow-down {
      font-size: 12px;
    }

    .el-tabs {
      min-height: calc(100vh - 60px - 55px - 20px - 20px - 55px - 55px);

      .el-tabs__content {
        min-height: calc(100vh - 60px - 55px - 20px - 20px - 55px - 55px)
      }
    }

    .el-tooltip {
      color: #000;

    }

    .el-tabs__nav-wrap::after {
      height: 1px;
    }

    .el-tabs__item {
      font-size: 16px;
    }

    .el-tabs__item.is-active {
      font-weight: bold;
    }

  }

  .contentImg {
    min-height: calc(100vh - 60px - 55px - 20px - 20px - 55px - 55px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .content {
    margin-top: 2rem;

    .replyOne {
      margin-bottom: 2rem;
    }

    .addColorshow {
      color: #379be9;
      margin-left: .5rem;
    }

    .maincontent {
      position: relative;

      .content {
        margin-left: 3.5rem;
      }
    }

    .headerImage {
      width: 3rem;
      height: 3rem;
      border-radius: 50%;
      overflow: hidden;
      flex-shrink: 0;
      position: absolute;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .mainevaluation-p {
      margin-left: 1rem;

      .bot {
        margin-bottom: 1rem;
        margin-top: 1rem;
      }

      .huifu {
        font-size: 12px;
        color: #adadad;
        cursor: pointer;
      }

      .addColor {

        color: #379be9;
      }

      .inputBox {
        margin: 0.01rem;

        .replayBtn {
          margin-top: .5rem;
        }
      }
    }

    .mainevaluation {
      margin-left: 1rem;
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;

      .addColorshow {
        cursor: pointer;
      }

      .top {
        font-size: 12px;
        margin-bottom: .8rem;

        .evaluator {
          margin-right: 1rem;
          color: #379be9;
          font-weight: bold;
        }

        .time {
          color: #999;
        }
      }

      .bot {
        span {
          line-height: 24px;
        }

        .huifubtn {
          font-size: 12px;
          margin-left: 0.5rem;

          .addColor {
            color: #379be9;
            margin-left: 0.3rem;
            cursor: pointer;
          }

        }

        font-size: 14px;
      }
    }

    .replyArea {
      margin-left: 4.5rem;
      padding: 1rem;
      background-color: #f7f7f7;
      font-size: 14px;
      margin-top: 1rem;

      .replayItem {
        margin-bottom: 1rem;

      }

      .top {
        color: #4b4b4b;
        line-height: 24px;

        .name {
          font-weight: bold;
        }
      }

      .bot {
        margin-top: .6rem;
        margin-bottom: 1rem;
        color: #adadad;
        font-size: 12px;

        .huifu {
          margin-right: .5rem;
          cursor: pointer;
        }

        .addColor {
          color: #379be9;
        }

        .addColorshow {
          cursor: pointer;
        }
      }

      .inputBox {
        margin: 0.01rem;

        .replayBtn {
          margin-top: .5rem;
        }
      }
    }
  }
</style>
